:root {
          --white: #ffffff;
          --bg-soft: #F5F7F9;
          --navy-900: #0A2540;
          --navy-800: #0E2E4F;
          --navy-700: #123A63;
          --blue-accent: #0E6FC2;
          --blue-accent-dark: #0A5596;
          --amber: #D9691E;
          --steel-600: #5B6B7A;
          --steel-500: #7A8896;
          --steel-200: #E3E8EC;
          --steel-100: #EFF2F5;
          --ink: #0F1A24;
          --radius: 2px;
          --maxw: 1240px;
          --serif-display: 'Manrope', 'Segoe UI', sans-serif;
          --body-font: 'Inter', 'Segoe UI', sans-serif;
          --mono-font: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
      }

      * {
          box-sizing: border-box;
      }

      html {
          scroll-behavior: smooth;
      }

      body {
          margin: 0;
          font-family: var(--body-font);
          color: var(--ink);
          background: var(--white);
          -webkit-font-smoothing: antialiased;
          line-height: 1.55;
      }

      img {
          max-width: 100%;
          display: block;
      }

      a {
          color: inherit;
          text-decoration: none;
      }

      h1,
      h2,
      h3,
      h4 {
          font-family: var(--serif-display);
          font-weight: 800;
          letter-spacing: -0.02em;
          margin: 0;
          color: var(--navy-900);
      }

      p {
          margin: 0;
      }

      .container {
          max-width: var(--maxw);
          margin: 0 auto;
          padding: 0 0px;
      }

      @media(max-width:640px) {
          .container {
              padding: 0 20px;
          }
      }

      .eyebrow {
          font-family: var(--mono-font);
          font-size: 18px;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--blue-accent);
          display: flex;
          align-items: center;
          gap: 10px;
          font-weight: 600;
      }

      .eyebrow::before {
          content: "";
          width: 22px;
          height: 2px;
          background: var(--amber);
          display: inline-block;
      }

      .eyebrow.light {
          color: #8FC3EE;
      }

      .eyebrow.light::before {
          background: var(--amber);
      }

      /* Buttons */
      .btn {
        border-radius: 7px;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-family: var(--mono-font);
          font-size: 16px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          font-weight: 600;
          padding: 15px 26px;
          border: 1px solid transparent;
          cursor: pointer;
          transition: all .25s ease;
          white-space: nowrap;
      }

      .btn svg {
          transition: transform .25s ease;
          flex-shrink: 0;
      }

      .btn:hover svg {
          transform: translateX(4px);
      }

      .btn-primary {
         background: #274c94;
          color: #fff;
      }

      .btn-primary:hover {
          background: var(--blue-accent-dark);
      }

      .btn-outline {
          border-color: var(--navy-900);
          color: #f7f7f7;
              background: #1c4b96;
      }

      .btn-outline:hover {
          background: var(--navy-900);
          color: #fff;
      }

      .btn-outline.on-dark {
          border-color: rgba(255, 255, 255, .5);
          color: #fff;
      }

      .btn-outline.on-dark:hover {
          background: #fff;
          color: var(--navy-900);
      }

      .btn-amber {
          background: var(--amber);
          color: #fff;
      }

      .btn-amber:hover {
          background: #B85417;
      }

      /* Header */
      header {
          position: sticky;
          top: 0;
          z-index: 200;
          background: rgba(255, 255, 255, .92);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid var(--steel-200);
          transition: padding .25s ease, box-shadow .25s ease;
      }

      header.scrolled {
          box-shadow: 0 4px 24px rgba(10, 37, 64, .08);
      }

      .nav-inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0px 19px;
          max-width: var(--maxw);
          margin: 0 auto;
          transition: padding .25s ease;
      }

      header.scrolled .nav-inner {
          padding: 0px 12px;
      }

      .brand {
          display: flex;
          align-items: center;
          gap: 12px;
      }

      .brand img {
          width: 240px !important;
          width: auto;
          transition: height .25s ease;
      }

      header.scrolled .brand img {
          width: 200px;
      }

      .brand-name {
          font-family: var(--serif-display);
          font-weight: 800;
          font-size: 17px;
          color: var(--navy-900);
          letter-spacing: -0.01em;
      }

      nav.primary-nav {
        margin-left:178px;
          display: flex;
          align-items: center;
          gap: 22px;
      }

      nav.primary-nav a {
          font-size: 18px;
          font-weight: 600;
             color: #000000;
          position: relative;
          padding: 4px 0;
          white-space: nowrap;
      }

      nav.primary-nav a:hover {
          color: var(--navy-900);
      }

      nav.primary-nav a::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: -2px;
          width: 0;
          height: 2px;
          background: var(--amber);
          transition: width .2s ease;
      }

      nav.primary-nav a:hover::after {
          width: 100%;
      }

      .nav-cta {
          display: flex;
          align-items: center;
          gap: 18px;
      }

      .hamburger {
          display: none;
          flex-direction: column;
          gap: 5px;
          background: none;
          border: none;
          cursor: pointer;
          padding: 6px;
      }

      .hamburger span {
          width: 24px;
          height: 2px;
          background: var(--navy-900);
          display: block;
          transition: .25s;
      }

      .mobile-menu {
          display: none;
          position: fixed;
          inset: 0;
          background: var(--navy-900);
          z-index: 300;
          flex-direction: column;
          padding: 28px 28px;
      }

      .mobile-menu.open {
          display: flex;
      }

      .mobile-menu .mclose {
          align-self: flex-end;
          background: none;
          border: none;
          color: #fff;
          font-size: 28px;
          cursor: pointer;
      }

      .mobile-menu a {
          color: #fff;
          font-size: 20px;
          font-weight: 700;
          padding: 14px 0;
          border-bottom: 1px solid rgba(255, 255, 255, .1);
          font-family: var(--serif-display);
      }

      @media(max-width:1180px) {
          nav.primary-nav {
              display: none;
          }

          .nav-cta .btn-outline {
              display: none;
          }

          .hamburger {
              display: flex;
          }
      }

      /* Hero */
      .hero {
          position: relative;
          overflow: hidden;
          padding: 88px 0 60px;
          background: linear-gradient(180deg, #FBFCFD 0%, var(--white) 100%);
      }

      .hero-bg {
          position: absolute;
          inset: 0;
          background-image: var(--BGTEX);
          background-size: cover;
          background-position: right top;
          opacity: .55;
          pointer-events: none;
      }

      .hero-grid {
          position: relative;
          display: grid;
          grid-template-columns: 1.05fr .95fr;
          gap: 56px;
          align-items: center;
      }

      @media(max-width:960px) {
          .hero-grid {
              grid-template-columns: 1fr;
              gap: 40px;
          }
      }

      .hero h1 {
          font-size: clamp(34px, 4.6vw, 58px);
          line-height: 1.05;
          margin: 18px 0 22px;
      }

      .hero h1 span {
          color: var(--blue-accent);
      }

      .hero p.lead {
          font-size: 17px;
          color: var(--steel-600);
          max-width: 520px;
          margin-bottom: 34px;
      }

      .hero-actions {
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
          margin-bottom: 44px;
      }

      .hero-indicators {
          display: grid;
          grid-template-columns: repeat(4, auto);
          gap: 26px;
      }

      @media(max-width:640px) {
          .hero-indicators {
              grid-template-columns: repeat(2, 1fr);
          }
      }

      .hind {
          display: flex;
          flex-direction: column;
          gap: 6px;
      }

      .hind .num {
          width: 8px;
          height: 8px;
          background: var(--amber);
      }

      .hind span.label {
          font-family: var(--mono-font);
          font-size: 11px;
          letter-spacing: .06em;
          color: var(--steel-600);
          text-transform: uppercase;
      }

      .hero-visual {
          position: relative;
      }

      .frame {
          position: relative;
          padding: 26px;
      }

      .frame::before,
      .frame::after,
      .frame .tick-a,
      .frame .tick-b {
          content: "";
          position: absolute;
          width: 26px;
          height: 26px;
          border: 2px solid var(--navy-900);
      }

      /* .frame::before {
            top: 0;
            left: 0;
            border-right: none;
            border-bottom: none;
        }

        .frame::after {
            bottom: 0;
            right: 0;
            border-left: none;
            border-top: none;
        } */

      .frame .tick-a {
          top: 0;
          right: 0;
          border-left: none;
          border-bottom: none;
      }

      .frame .tick-b {
          bottom: 0;
          left: 0;
          border-right: none;
          border-top: none;
      }

      .frame img {
          height: 500px;
          position: relative;
          z-index: 1;
          background: #fff;
      }

      .floating-badge {
          position: absolute;
          background: #fff;
          border: 1px solid var(--steel-200);
          box-shadow: 0 14px 34px rgba(10, 37, 64, .14);
          padding: 12px 16px;
          font-family: var(--mono-font);
          font-size: 11px;
          color: var(--navy-900);
          display: flex;
          flex-direction: column;
          gap: 2px;
          width: max-content;
          max-width: 190px;
          z-index: 2;
      }

      .floating-badge b {
          font-size: 18px;
          font-family: var(--serif-display);
          color: var(--navy-900);
          white-space: nowrap;
      }

      .fb-1 {
          top: 6%;
          left: -4%;
      }

      .fb-2 {
          bottom: 8%;
          left: -6%;
      }

      @media(max-width:1180px) {
          .fb-1 {
              left: 2%;
          }

          .fb-2 {
              left: 2%;
          }
      }

      @media(max-width:960px) {

          .fb-1,
          .fb-2 {
              position: static;
              margin: 14px 10px 0 0;
              display: inline-flex;
              max-width: none;
          }
      }

      /* Trust logos */
      /* =========================================================
   CLIENT LOGO SCROLLER
========================================================= */

      .client-logo-slider {
          width: 100%;
          overflow: hidden;
          position: relative;

          padding: 10px 0 20px;

          /* Fade edges */
          mask-image: linear-gradient(to right,
                  transparent,
                  black 5%,
                  black 95%,
                  transparent);

          -webkit-mask-image: linear-gradient(to right,
                  transparent,
                  black 5%,
                  black 95%,
                  transparent);
      }


      /* =========================================================
   TRACK
========================================================= */

      .client-logo-track {

          display: flex;

          align-items: center;

          gap: 18px;

          width: max-content;

          animation: clientLogoScroll 30s linear infinite;
      }


      /* =========================================================
   LOGO CARD
========================================================= */

      .client-logo-track .logo-card {

          flex: 0 0 190px;

          width: 190px;

          height: 98px;

          

          padding: 10px 10px;

          display: flex;

          align-items: center;

          justify-content: center;

          transition:
              transform .25s ease,
              box-shadow .25s ease,
              border-color .25s ease;
      }


      /* =========================================================
   LOGO
========================================================= */

      .client-logo-track .logo-card img {

          max-width: 100%;

          max-height: 98px;

          width: auto;

          height: auto;

          object-fit: contain;

          filter: grayscale(15%);
      }


      /* =========================================================
   HOVER
========================================================= */

      .client-logo-track .logo-card:hover {

          transform: translateY(-4px);

          box-shadow:
              0 16px 30px rgba(10, 37, 64, .10);

          border-color: var(--steel-500);
      }


      /* =========================================================
   PAUSE ON HOVER
========================================================= */

      .client-logo-slider:hover .client-logo-track {

          animation-play-state: paused;
      }


      /* =========================================================
   CONTINUOUS SCROLL
========================================================= */

      @keyframes clientLogoScroll {

          from {
              transform: translateX(0);
          }

          to {
              transform: translateX(calc(-50% - 9px));
          }

      }


      /* =========================================================
   TABLET
========================================================= */

      @media (max-width: 960px) {

          .client-logo-track .logo-card {

              flex: 0 0 180px;

              width: 180px;

              height: 90px;
          }

      }


      /* =========================================================
   MOBILE
========================================================= */

      @media (max-width: 640px) {

          .client-logo-slider {

              mask-image: none;

              -webkit-mask-image: none;
          }

          .client-logo-track {

              gap: 12px;

              animation-duration: 24s;
          }

          .client-logo-track .logo-card {

              flex: 0 0 155px;

              width: 155px;

              height: 82px;

              padding: 15px;
          }

          .client-logo-track .logo-card img {

              max-height: 40px;
          }

      }

      /* Section generic */
      section {
          padding: 50px 0;
      }

      @media(max-width:640px) {
          section {
              padding: 64px 0;
          }
      }

      .section-head {
        
          margin-bottom: 52px;
      }

      .section-head h2 {
          font-size: clamp(26px, 3.4vw, 32px);
          margin-top: 16px;
          line-height: 1.12;
      }

      .on-dark .section-head h2 {
          color: #fff;
      }

      .on-dark .section-head p {
          color: #B9C7D6;
      }

      .section-head p {
          color: var(--steel-600);
          margin-top: 16px;
          font-size: 18px;
      }

      /* About split */
      .about-grid {
          display: grid;
          grid-template-columns: .9fr 1.1fr;
          gap: 64px;
          align-items: center;
      }

      @media(max-width:900px) {
          .about-grid {
              grid-template-columns: 1fr;
              gap: 36px;
          }
      }

      .about-img {
          position: relative;
          padding: 20px;
      }

      .about-img::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 22px;
          height: 22px;
          border-top: 2px solid var(--amber);
          border-left: 2px solid var(--amber);
      }

      .about-img::after {
          content: "";
          position: absolute;
          bottom: 0;
          right: 0;
          width: 22px;
          height: 22px;
          border-bottom: 2px solid var(--amber);
          border-right: 2px solid var(--amber);
      }

      .about-img .imgwrap {
          background: var(--navy-900);
          position: relative;
          overflow: hidden;
          aspect-ratio: 4/5;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .about-img .imgwrap img {
          opacity: .92;
          height: 100%;
          width: 100%;
          object-fit: cover;
      }

      .about-body p {
          color: var(--steel-600);
          font-size: 15.5px;
          margin-bottom: 16px;
      }

      .about-body ul {
          list-style: none;
          margin: 26px 0;
          padding: 0;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px 24px;
      }

      @media(max-width:520px) {
          .about-body ul {
              grid-template-columns: 1fr;
          }
      }

      .about-body li {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          font-size: 14px;
          color: var(--navy-900);
          font-weight: 600;
      }

      .about-body li::before {
          content: "";
          width: 6px;
          height: 6px;
          background: var(--amber);
          margin-top: 7px;
          flex-shrink: 0;
      }

      .link-arrow {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-family: var(--mono-font);
          font-size: 16px;
          font-weight: 700;
          letter-spacing: .04em;
          color: var(--blue-accent);
          margin-top: 8px;
      }

      .link-arrow svg {
          transition: transform .2s ease;
      }

      .link-arrow:hover svg {
          transform: translateX(5px);
      }

    /* =========================================================
   PRODUCT SOLUTIONS SECTION
========================================================= */
/* =========================================================
   TECHNICAL SOLUTIONS SECTION
========================================================= */

.tech-solutions {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}


/* =========================================================
   HEADING
========================================================= */

.tech-solutions-heading {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 70px;
    align-items: end;

    margin-bottom: 55px;
}

.tech-kicker {
    position: relative;

    display: inline-block;
    margin-bottom: 15px;
    padding-left: 35px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #0e6fc2;
}

.tech-kicker::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 24px;
    height: 2px;

    background: #d9691e;
}

.tech-solutions-heading h2 {
    max-width: 700px;

    margin: 0;

    font-size: clamp(34px, 4vw, 36px);
    line-height: 1.1;
    font-weight: 700;

    color: #142536;
}

.tech-solutions-heading h2 strong {
    color: #0e6fc2;
}

.tech-solutions-heading p {
    margin: 0;

    font-size: 15px;
    line-height: 1.8;

    color: #6b7b8a;
}


/* =========================================================
   SOLUTION LIST
========================================================= */

.tech-solutions-list {
    border-top: 1px solid #dce5ec;
}


/* =========================================================
   SOLUTION ITEM
========================================================= */

.tech-solution-item {
    position: relative;

    display: grid;

    grid-template-columns: 70px 80px minmax(0, 1fr) 55px;

    gap: 25px;

    align-items: center;

    min-height: 175px;

    padding: 30px 20px;

    border-bottom: 1px solid #dce5ec;

    transition:
        background 0.35s ease,
        padding 0.35s ease;
}


/* Orange side line */

.tech-solution-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 0;

    background: #d9691e;

    transition: height 0.35s ease;
}


/* Hover */

.tech-solution-item:hover {
    padding-left: 30px;
    background: #f7fafc;
}

.tech-solution-item:hover::before {
    height: 100%;
}


/* =========================================================
   NUMBER
========================================================= */

.tech-solution-number {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;

    color: #a5b0ba;
}


/* =========================================================
   ICON
========================================================= */

.tech-solution-icon {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #0e6fc2;

    border: 1px solid #d8e5ef;
    background: #f4f8fb;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;
}

.tech-solution-icon svg {
    width: 40px;
    height: 40px;
}

.tech-solution-item:hover .tech-solution-icon {
    color: #ffffff;

    background: #0e6fc2;
    border-color: #0e6fc2;
}


/* =========================================================
   CONTENT
========================================================= */

.tech-solution-content h3 {
    margin: 0 0 9px;

    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;

    color: #172b3d;
}

.tech-solution-content p {
    max-width: 850px;

    margin: 0 0 14px;

    font-size: 14px;
    line-height: 1.7;

    color: #697987;
}


/* =========================================================
   TECHNICAL TAGS
========================================================= */

.tech-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tech-specs span {
    padding: 5px 9px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;

    color: #547087;

    background: #f1f5f8;
    border: 1px solid #e1e8ed;
}


/* =========================================================
   ARROW
========================================================= */

.tech-solution-arrow {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    color: #0e6fc2;

    border: 1px solid #d7e4ed;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.tech-solution-arrow i {
    font-size: 13px;
}

.tech-solution-arrow:hover {
    color: #ffffff;
    background: #d9691e;
    border-color: #d9691e;

    transform: translate(3px, -3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .tech-solutions {
        padding: 80px 0;
    }

    .tech-solutions-heading {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .tech-solutions-heading p {
        max-width: 700px;
    }

    .tech-solution-item {
        grid-template-columns: 55px 65px minmax(0, 1fr) 45px;
        gap: 18px;
        padding: 25px 15px;
    }

    .tech-solution-item:hover {
        padding-left: 22px;
    }

    .tech-solution-icon {
        width: 55px;
        height: 55px;
    }

    .tech-solution-icon svg {
        width: 35px;
        height: 35px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .tech-solutions {
        padding: 65px 0;
    }

    .tech-solutions-heading {
        gap: 15px;
        margin-bottom: 35px;
    }

    .tech-solutions-heading h2 {
        font-size: 30px;
    }

    .tech-solutions-heading p {
        font-size: 14px;
        line-height: 1.7;
    }


    .tech-solution-item {

        grid-template-columns: 45px 55px minmax(0, 1fr);

        gap: 15px;

        min-height: auto;

        padding: 25px 10px;
    }

    .tech-solution-item:hover {
        padding-left: 15px;
    }


    .tech-solution-number {
        align-self: flex-start;
        padding-top: 5px;
    }


    .tech-solution-icon {
        width: 50px;
        height: 50px;

        align-self: flex-start;
    }

    .tech-solution-icon svg {
        width: 32px;
        height: 32px;
    }


    .tech-solution-content h3 {
        font-size: 18px;
    }

    .tech-solution-content p {
        font-size: 13px;
        line-height: 1.65;
    }


    .tech-solution-arrow {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .tech-solutions {
        padding: 55px 0;
    }

    .tech-solutions-heading h2 {
        font-size: 27px;
    }

    .tech-solution-item {
        grid-template-columns: 35px 48px minmax(0, 1fr);
        gap: 12px;
        padding: 22px 5px;
    }

    .tech-solution-icon {
        width: 46px;
        height: 46px;
    }

    .tech-solution-icon svg {
        width: 29px;
        height: 29px;
    }

    .tech-solution-content h3 {
        font-size: 16px;
    }

    .tech-solution-content p {
        font-size: 12px;
    }

    .tech-specs span {
        font-size: 8px;
        padding: 4px 7px;
    }

}
    
      /* Engineering dark section */
      .dark-section {
          background: var(--navy-900);
          color: #fff;
          position: relative;
          overflow: hidden;
      }

      .dark-section::before {
          content: "";
          position: absolute;
          inset: 0;
          background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
          background-size: 44px 44px;
          pointer-events: none;
      }

      .eng-grid {
          position: relative;
          display: grid;
          grid-template-columns: .9fr 1.1fr;
          gap: 60px;
          align-items: start;
      }

      @media(max-width:900px) {
          .eng-grid {
              grid-template-columns: 1fr;
          }
      }

      .spec-blocks {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1px;
          background: rgba(255, 255, 255, .14);
          border: 1px solid rgba(255, 255, 255, .14);
      }

      @media(max-width:560px) {
          .spec-blocks {
              grid-template-columns: 1fr;
          }
      }

      .spec-block {
          background: var(--navy-800);
          padding: 26px 24px;
      }

      .spec-block .sv {
          font-family: var(--mono-font);
          font-size: 26px;
          font-weight: 700;
          color: #fff;
      }

      .spec-block .su {
          font-size: 12px;
          color: #8FC3EE;
          font-family: var(--mono-font);
      }

      .spec-block .sl {
          margin-top: 10px;
          font-size: 13px;
          color: #B9C7D6;
      }

      .eng-copy p {
          color: #B9C7D6;
          font-size: 15.5px;
          margin-bottom: 22px;
      }

      .eng-list {
          list-style: none;
          margin: 0 0 30px;
          padding: 0;
      }

      .eng-list li {
          display: flex;
          gap: 12px;
          padding: 14px 0;
          border-top: 1px solid rgba(255, 255, 255, .12);
          font-size: 14px;
          color: #DCE6EF;
      }

      .eng-list li:first-child {
          border-top: none;
      }

      .eng-list li b {
          color: #fff;
          min-width: 150px;
          display: inline-block;
          font-family: var(--mono-font);
          font-size: 12px;
          letter-spacing: .03em;
          text-transform: uppercase;
          color: #8FC3EE;
      }

      /* Applications */
      .app-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 18px;
      }

      @media(max-width:900px) {
          .app-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      }

      @media(max-width:560px) {
          .app-grid {
              grid-template-columns: 1fr;
          }
      }

      .app-panel {
          border-radius: 10px;
          position: relative;
          aspect-ratio: 4/5;
          overflow: hidden;
          background: #424344;
          cursor: default;
      }

      .app-panel .app-bg {
          position: absolute;
          inset: 0;
          background-size: cover;
          background-position: center;
          transition: transform .5s ease;
          opacity: .85;
      }

      .app-panel:hover .app-bg {
          transform: scale(1.08);
      }

      .app-panel::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(0deg, rgb(10 37 64 / 0%) 0%, rgb(10 37 64 / 2%) 55%, rgb(10 37 64 / 9%) 100%);
      }

      .app-panel-inner {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          padding: 22px;
          z-index: 2;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
      }

      .app-panel h4 {
          color: #fff;
          font-size: 18px;
      }

      .app-panel svg {
          opacity: 0;
          transform: translateX(-6px);
          transition: .25s ease;
          flex-shrink: 0;
      }

      .app-panel:hover svg {
          opacity: 1;
          transform: translateX(0);
      }

      /* Why choose */
      .why-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border-top: 1px solid var(--steel-200);
      }

      @media(max-width:760px) {
          .why-grid {
              grid-template-columns: 1fr;
          }
      }

      .why-item {
          padding: 34px 30px;
          border-bottom: 1px solid var(--steel-200);
          border-right: 1px solid var(--steel-200);
      }

      .why-item:nth-child(3n) {
          border-right: none;
      }

      @media(max-width:760px) {
          .why-item {
              border-right: none !important;
          }
      }

      .why-item .wn {
          font-family: var(--mono-font);
          color: var(--amber);
          font-size: 13px;
          font-weight: 700;
      }

      .why-item h3 {
          font-size: 18px;
          margin: 14px 0 10px;
      }

      .why-item p {
          color: var(--steel-600);
          font-size: 16px;
      }

      /* Process timeline */
      .timeline {
          display: flex;
          gap: 0;
          position: relative;
      }

      @media(max-width:900px) {
          .timeline {
              flex-direction: column;
          }
      }

      .tstep {
          flex: 1;
          position: relative;
          padding: 0 24px 0 0;
      }

      .tstep:last-child {
          padding-right: 0;
      }

      .tstep .tn {
          font-family: var(--mono-font);
          font-size: 15px;
          color: var(--amber);
          font-weight: 700;
          border-top: 3px solid var(--amber);
          padding-top: 14px;
          display: block;
          margin-bottom: 14px;
      }

      .tstep h4 {
          font-size: 16px;
          margin-bottom: 8px;
      }

      .tstep p {
          font-size: 16px;
          color: var(--steel-600);
      }

      .tarrow {
          display: flex;
          align-items: flex-start;
          padding-top: 6px;
          color: var(--steel-500);
      }

      @media(max-width:900px) {
          .tarrow {
              transform: rotate(90deg);
              padding: 14px 0;
          }
      }

      /* Tech spec section */
      .spec-tabs-wrap {
          border: 1px solid var(--steel-200);
      }

      .spec-table {
          width: 100%;
          border-collapse: collapse;
          font-size: 13.5px;
      }

      .spec-table th {
          text-align: left;
          background: var(--navy-900);
          color: #fff;
          font-family: var(--mono-font);
          font-size: 11px;
          letter-spacing: .06em;
          text-transform: uppercase;
          padding: 14px 18px;
          font-weight: 600;
      }

      .spec-table td {
          padding: 13px 18px;
          border-top: 1px solid var(--steel-200);
          color: var(--steel-600);
      }

      .spec-table tr td:first-child {
          color: var(--navy-900);
          font-weight: 700;
      }

      .spec-scroll {
          overflow-x: auto;
      }

      .spec-cards {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1px;
          background: var(--steel-200);
          border: 1px solid var(--steel-200);
          margin-top: 2px;
      }

      @media(max-width:900px) {
          .spec-cards {
              grid-template-columns: repeat(2, 1fr);
          }
      }

      @media(max-width:520px) {
          .spec-cards {
              grid-template-columns: 1fr;
          }
      }

      .spec-card {
          background: #fff;
          padding: 24px;
      }

      .spec-card .sc-label {
          font-family: var(--mono-font);
          font-size: 10.5px;
          color: var(--steel-500);
          text-transform: uppercase;
          letter-spacing: .06em;
      }

      .spec-card .sc-value {
          font-family: var(--serif-display);
          font-size: 22px;
          font-weight: 800;
          color: var(--navy-900);
          margin-top: 8px;
      }

      /* Resources */
      .resource-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 2px;
          background: var(--steel-200);
          border: 1px solid var(--steel-200);
      }

      @media(max-width:900px) {
          .resource-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      }

      @media(max-width:520px) {
          .resource-grid {
              grid-template-columns: 1fr;
          }
      }

      .res-card {
          background: #fff;
          padding: 30px 26px;
          display: flex;
          flex-direction: column;
          gap: 14px;
          transition: background .2s ease;
      }

      .res-card:hover {
          background: var(--bg-soft);
      }

      .res-card h4 {
          font-size: 16px;
      }

      .res-card p {
          font-size: 16px;
          color: var(--steel-600);
          flex: 1;
      }

      /* Final CTA */
      .final-cta {
          background: var(--navy-900);
          color: #fff;
          text-align: center;
          position: relative;
      
          padding: 100px 0;
      }


      .final-cta h2 {
          color: #fff;
          font-size: clamp(28px, 4vw, 44px);
          max-width: 760px;
          margin: 20px auto 20px;
          line-height: 1.12;
      }

      .final-cta p {
          color: #B9C7D6;
          max-width: 560px;
          margin: 0 auto 40px;
          font-size: 16px;
      }

      .final-cta .hero-actions {
          justify-content: center;
          margin-bottom: 0;
      }

      /* Contact */
      .contact-grid {
          display: grid;
          grid-template-columns: .85fr 1.15fr;
          gap: 64px;
      }

      @media(max-width:900px) {
          .contact-grid {
              grid-template-columns: 1fr;
              gap: 40px;
          }
      }

      .contact-info-block {
          margin-top: 30px;
          padding-top: 24px;
          border-top: 1px solid var(--steel-200);
      }

      .contact-info-block .ci-label {
          font-family: var(--mono-font);
          font-size: 16px;
          text-transform: uppercase;
          letter-spacing: .06em;
          color: var(--steel-500);
          margin-bottom: 6px;
      }

      .contact-info-block .ci-value {
          font-size: 15px;
          color: var(--navy-900);
          font-weight: 600;
          margin-bottom: 22px;
      }

      .form-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
      }

      @media(max-width:560px) {
          .form-grid {
              grid-template-columns: 1fr;
          }
      }

      .field {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .field.full {
          grid-column: 1/-1;
      }

      .field label {
          font-family: var(--mono-font);
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: .05em;
          color: #ffffff;
      }

      .field input,
      .field select,
      .field textarea {
          border: 1px solid var(--steel-200);
          padding: 13px 14px;
          font-family: var(--body-font);
          font-size: 14px;
          background: var(--bg-soft);
          outline: none;
          transition: border-color .2s ease, background .2s ease;
      }

      .field input:focus,
      .field select:focus,
      .field textarea:focus {
          border-color: var(--blue-accent);
          background: #fff;
      }

      .field textarea {
          resize: vertical;
          min-height: 110px;
      }

      #enquiryForm {
          border-radius: 10px;
          background-color: #10253f;
          padding: 35px;
          margin-top: 24px;
      }

      .form-success {
          display: none;
          padding: 40px;
          text-align: center;
          border: 1px solid var(--steel-200);
          background: var(--bg-soft);
      }

      .form-success.show {
          display: block;
      }

      .form-success h3 {
          margin-bottom: 10px;
      }

      .form-success p {
          color: var(--steel-600);
      }

      /* Footer */
      footer {
          background: var(--navy-900);
          color: #B9C7D6;
          padding: 70px 0 30px;
      }

      .footer-grid {
          display: grid;
          grid-template-columns: 1.4fr repeat(4, 1fr);
          gap: 36px;
      }

      @media(max-width:900px) {
          .footer-grid {
              grid-template-columns: 1fr 1fr;
          }
      }

      @media(max-width:560px) {
          .footer-grid {
              grid-template-columns: 1fr;
          }
      }

      .footer-brand {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 16px;
      }

      .footer-brand img {
          border-radius: 7px;
          background-color: white;
          width: 180px;
          /* filter: brightness(0) invert(1); */
      }

      .footer-brand span {
          font-family: var(--serif-display);
          font-weight: 800;
          color: #fff;
          font-size: 16px;
      }

      footer p.tag {
          font-size: 13.5px;
          color: #8CA1B4;
          max-width: 280px;
      }

      .footer-col h5 {
          font-family: var(--mono-font);
          font-size: 18px;
          letter-spacing: .08em;
          text-transform: uppercase;
          color: #8FC3EE;
          margin-bottom: 18px;
      }

      .footer-col a {
          display: block;
          font-size: 16px;
          color: #B9C7D6;
          margin-bottom: 12px;
      }

      .footer-col a:hover {
          color: #fff;
      }

      .footer-bottom {
          margin-top: 56px;
          padding-top: 24px;
          border-top: 1px solid rgba(255, 255, 255, .12);
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 12px;
          font-size: 12.5px;
          color: #8CA1B4;
      }

      .footer-bottom a {
          color: #8CA1B4;
      }

      .footer-bottom .flinks {
          display: flex;
          gap: 20px;
      }

      /* Back to top + floating cta */
      #backToTop {
          position: fixed;
          bottom: 80px;
          right: 26px;
          width: 46px;
          height: 46px;
          background: var(--navy-900);
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          cursor: pointer;
          z-index: 150;
          opacity: 0;
          pointer-events: none;
          transition: opacity .25s ease, transform .25s ease;
      }

      #backToTop.show {
          opacity: 1;
          pointer-events: auto;
      }

      #backToTop:hover {
          background: var(--blue-accent);
      }

      .float-enquire {
          border-radius: 6px;

          position: fixed;
          bottom: 26px;
          left: 26px;
          background: #1ed93f;
          color: #1c0f0f;
          padding: 13px 18px;
          font-family: var(--mono-font);
          font-size: 12px;
          letter-spacing: .06em;
          text-transform: uppercase;
          font-weight: 700;
          z-index: 150;
          box-shadow: 0 12px 26px rgba(217, 105, 30, .35);
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .float-enquire:hover {
          background: #1ed93f;
      }

.float-call {
    border-radius: 6px;
    position: fixed;
    bottom: 26px;
    right: 26px;
    background: #d16927;
    color: #ffffff;
    padding: 13px 18px;
    font-family: var(--mono-font);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    z-index: 150;
    box-shadow: 0 12px 26px rgba(7, 36, 63, .30);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: .3s ease;
}

.float-call:hover {
    background: #0b3559;
    color: #ffffff;
    transform: translateY(-3px);
}



      @media(max-width:640px) {
          .float-enquire span.ftext,
    .float-call span.ftext {
        display: none;
    }

    .float-enquire {
        bottom: 20px;
        left: 20px;
        padding: 14px;
    }

    .float-call {
        bottom: 20px;
        right: 20px;
        padding: 14px;
    }


         

          #backToTop {
              width: 42px;
              height: 42px;
              bottom: 20px;
              right: 20px;
          }

         
      }

      /* Reveal animation */
      .reveal {
          opacity: 0;
          transform: translateY(24px);
          transition: opacity .7s ease, transform .7s ease;
      }

      .reveal.visible {
          opacity: 1;
          transform: translateY(0);
      }

      @media (prefers-reduced-motion: reduce) {
          html {
              scroll-behavior: auto;
          }

          .reveal {
              opacity: 1;
              transform: none;
              transition: none;
          }

          * {
              animation: none !important;
              transition: none !important;
          }
      }


      .sx-solutions {
          position: relative;
          padding: 90px 0;
          background: #f7f9fc;
          overflow: hidden;
      }

      .sx-solutions::before {
          content: "";
          position: absolute;
          width: 420px;
          height: 420px;
          right: -180px;
          top: -160px;
          border-radius: 50%;
          background: rgba(18, 74, 122, 0.045);
      }

      .sx-container {
          width: min(1200px, 92%);
          margin: auto;
          position: relative;
          z-index: 2;
      }

      /* TOP AREA */

      /* =========================
   SECTION
========================= */

      .sx-solutions {
          position: relative;
          padding: 95px 0 85px;
          background: #ffffff;
          overflow: hidden;
      }

      .sx-container {
          width: min(1240px, 92%);
          margin: 0 auto;
      }


      /* =========================
   HEADING
========================= */

      .sx-heading-area {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          gap: 40px;
          margin-bottom: 45px;
      }

      .sx-heading-left {
          max-width: 720px;
      }

      .sx-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 9px;

          margin-bottom: 14px;

          color: #1260a0;

          font-size: 12px;
          font-weight: 700;

          letter-spacing: 1.8px;
          text-transform: uppercase;
      }

      .sx-eyebrow::before {
          content: "";

          width: 28px;
          height: 2px;

          background: #1260a0;
      }

      .sx-main-title {
          margin: 0;

          color: #102a43;

          font-size: clamp(32px, 4vw, 50px);

          line-height: 1.08;

          font-weight: 750;

          letter-spacing: -1.5px;
      }

      .sx-main-title span {
          color: #1260a0;
      }

      .sx-description {
          max-width: 670px;

          margin: 18px 0 0;

          color: #66778a;

          font-size: 15px;

          line-height: 1.75;
      }


      /* =========================
   CONTROLS
========================= */

      .sx-slider-controls {
          display: flex;
          gap: 10px;
      }

      .sx-arrow {
          width: 48px;
          height: 48px;

          border: 1px solid #d9e1e9;

          background: #fff;

          color: #173b59;

          display: flex;
          align-items: center;
          justify-content: center;

          cursor: pointer;

          font-size: 18px;

          transition: all .3s ease;
      }

      .sx-arrow:hover {
          background: #1260a0;

          border-color: #1260a0;

          color: #fff;

          transform: translateY(-2px);
      }


      /* =========================
   SLIDER
========================= */

      .sx-slider-wrapper {
          position: relative;

          width: 100%;
      }

      .sx-slider {
          display: flex;

          gap: 22px;

          overflow-x: auto;

          scrollbar-width: none;

          padding: 5px 2px 25px;

          scroll-behavior: auto;

          scroll-snap-type: none;

          cursor: grab;

          will-change: scroll-position;
      }

      .sx-slider:active {
          cursor: grabbing;
      }

      .sx-slider::-webkit-scrollbar {
          display: none;
      }


      /* =========================
   CARD
========================= */

      .sx-card {
          position: relative;

          flex: 0 0 350px;

          min-height: 455px;

          background: #fff;

          border: 1px solid #e4e9ee;

          overflow: hidden;

          transition:
              transform .4s cubic-bezier(.2, .7, .2, 1),
              box-shadow .4s ease,
              border-color .4s ease;
      }

      .sx-card:hover {
          transform: translateY(-8px);

          box-shadow:
              0 22px 50px rgba(25, 55, 80, .13);

          border-color: transparent;
      }


      /* =========================
   IMAGE
========================= */

      .sx-card-image {
          height: 235px;

          overflow: hidden;

          position: relative;

          background: #dfe7ed;
      }

      .sx-card-image img {
          width: 100%;
          height: 100%;

          object-fit: cover;

          display: block;

          transition:
              transform .8s cubic-bezier(.2, .7, .2, 1);
      }

      .sx-card:hover .sx-card-image img {
          transform: scale(1.07);
      }


      /* IMAGE OVERLAY */

      .sx-image-overlay {
          position: absolute;

          inset: 0;

          background:
              linear-gradient(to top,
                  rgba(9, 31, 49, .75),
                  rgba(9, 31, 49, 0) 68%);
      }


      /* =========================
   NUMBER
========================= */

      .sx-number {
          position: absolute;

          left: 20px;
          bottom: 18px;

          color: rgba(255, 255, 255, .78);

          font-size: 11px;

          letter-spacing: 1.5px;

          font-weight: 700;
      }


      /* =========================
   CONTENT
========================= */

      .sx-card-content {
          padding: 25px 25px 24px;
      }

      .sx-card-tag {
          color: #1260a0;

          font-size: 10px;

          font-weight: 800;

          text-transform: uppercase;

          letter-spacing: 1.4px;

          margin-bottom: 9px;
      }

      .sx-card-title {
          margin: 0 0 11px;

          color: #17344d;

          font-size: 21px;

          line-height: 1.25;

          font-weight: 700;
      }

      .sx-card-text {
          margin: 0;

          color: #708090;

          font-size: 16px;

          line-height: 1.65;
      }


      /* =========================
   LINK
========================= */

      .sx-card-link {
          display: inline-flex;

          align-items: center;

          gap: 9px;

          margin-top: 20px;

          color: #173b59;

          text-decoration: none;

          font-size: 12px;

          font-weight: 750;

          letter-spacing: .5px;

          text-transform: uppercase;

          transition: all .3s ease;
      }

      .sx-card-link span {
          width: 30px;
          height: 30px;

          display: flex;

          align-items: center;
          justify-content: center;

          border: 1px solid #d8e1e8;

          transition: all .3s ease;
      }

      .sx-card:hover .sx-card-link {
          color: #1260a0;
      }

      .sx-card:hover .sx-card-link span {
          background: #1260a0;

          border-color: #1260a0;

          color: #fff;

          transform: translateX(4px);
      }


      /* =========================
   BOTTOM
========================= */

      .sx-bottom-note {
          margin-top: 30px;

          display: flex;

          align-items: center;

          gap: 20px;

          color: #8796a4;

          font-size: 12px;
      }

      .sx-bottom-note::before {
          content: "";

          height: 1px;

          flex: 1;

          background: #dfe5ea;
      }


      /* =========================
   RESPONSIVE
========================= */

      @media (max-width: 991px) {

          .sx-solutions {
              padding: 70px 0;
          }

          .sx-heading-area {
              align-items: flex-start;

              flex-direction: column;
          }

          .sx-slider-controls {
              align-self: flex-end;
          }

          .sx-card {
              flex-basis: 310px;
          }

      }


      @media (max-width: 575px) {

          .sx-solutions {
              padding: 60px 0;
          }

          .sx-container {
              width: 90%;
          }

          .sx-main-title {
              font-size: 31px;
          }

          .sx-description {
              font-size: 14px;
          }

          .sx-card {
              flex: 0 0 285px;

              min-height: 430px;
          }

          .sx-card-image {
              height: 200px;
          }

          .sx-card-content {
              padding: 21px;
          }

          .sx-heading-area {
              margin-bottom: 30px;
          }

          .sx-bottom-note {
              display: none;
          }

      }



      /* =========================================================
   ENGINEERING HERO
========================================================= */

      .engineering-hero {
          align-items: center;

          background-size: cover;
          background-position: center;
          position: relative;
          min-height: 720px;
          overflow: hidden;
          background: #07243f;
          color: #fff;
      }


      /* =========================================================
   SLIDES
========================================================= */

      .engineering-slides {
          position: absolute;
          inset: 0;
      }

      .engineering-slide {
          position: absolute;
          inset: 0;

          display: flex;
          align-items: center;

          background-size: cover;
          background-position: center;

          opacity: 0;
          visibility: hidden;


      }

      .engineering-slide.engineering-active {
          opacity: 1;
          visibility: visible;
          transform: scale(1);
      }


      /* =========================================================
   CONTAINER
========================================================= */

      .engineering-container {
          position: relative;
          z-index: 3;

          width: min(1240px, 92%);
          margin: 0 auto;
      }


      /* =========================================================
   CONTENT
========================================================= */

      .engineering-content {
          max-width: 720px;
          padding: 100px 0 150px;
      }


      /* =========================================================
   EYEBROW
========================================================= */

      .engineering-eyebrow {
          display: flex;
          align-items: center;
          gap: 12px;

          margin-bottom: 22px;

          color: #65b5e7;

          font-size: 11px;
          font-weight: 800;

          letter-spacing: 2px;
      }

      .engineering-eyebrow::before {
          content: "";

          width: 38px;
          height: 2px;

          background: #65b5e7;
      }


      /* =========================================================
   HEADING
========================================================= */

      .engineering-hero h1 {
          margin: 0;

          max-width: 720px;

          color: #fff;

          font-size: clamp(44px, 6vw, 76px);
          line-height: 1.02;

          font-weight: 750;

          letter-spacing: -2.8px;
      }

      .engineering-hero h1 span {
          display: block;
          color: #58afe2;
      }


      /* =========================================================
   DESCRIPTION
========================================================= */

      .engineering-content>p {
          max-width: 620px;

          margin: 26px 0 35px;

          color: rgba(255, 255, 255, .78);

          font-size: 16px;
          line-height: 1.75;
      }


      /* =========================================================
   BUTTONS
========================================================= */

      .engineering-buttons {
          display: flex;

          align-items: center;

          gap: 13px;

          flex-wrap: wrap;
      }

      .engineering-btn-primary,
      .engineering-btn-secondary {

          min-height: 52px;

          padding: 0 23px;

          display: inline-flex;

          align-items: center;
          justify-content: center;

          gap: 14px;

          text-decoration: none;

          font-size: 11px;
          font-weight: 800;

          letter-spacing: 1px;

          transition: all .3s ease;
      }


      /* PRIMARY */

      .engineering-btn-primary {
          background: #fff;
          color: #07243f;
      }

      .engineering-btn-primary span {
          font-size: 18px;

          transition:
              transform .3s ease;
      }

      .engineering-btn-primary:hover {
          background: #58afe2;
          color: #fff;
      }

      .engineering-btn-primary:hover span {
          transform: translateX(5px);
      }


      /* SECONDARY */

      .engineering-btn-secondary {
          border: 1px solid rgba(255, 255, 255, .4);

          background: rgba(255, 255, 255, .04);

          color: #fff;
      }

      .engineering-btn-secondary:hover {
          background: rgba(255, 255, 255, .12);

          border-color: #fff;
      }


      /* =========================================================
   NAVIGATION
========================================================= */

      .engineering-navigation {
          position: absolute;

          right: 4%;
          bottom: 82px;

          z-index: 20;

          display: flex;

          align-items: center;

          gap: 12px;
      }


      /* ARROWS */

      .engineering-arrow {

          width: 48px;
          height: 48px;

          border: 1px solid rgba(255, 255, 255, .38);

          background: rgba(7, 36, 63, .45);

          color: #fff;

          font-size: 17px;

          cursor: pointer;

          transition: all .3s ease;
      }

      .engineering-arrow:hover {
          background: #fff;

          border-color: #fff;

          color: #07243f;
      }


      /* =========================================================
   DOTS
========================================================= */

      .engineering-dots {

          display: flex;

          align-items: center;

          gap: 7px;
      }

      .engineering-dot {

          width: 25px;
          height: 3px;

          padding: 0;

          border: 0;

          background: rgba(255, 255, 255, .35);

          cursor: pointer;

          transition: all .4s ease;
      }

      .engineering-dot.engineering-dot-active {

          width: 48px;

          background: #58afe2;
      }


      /* =========================================================
   BOTTOM LINE
========================================================= */

      .engineering-bottom-line {

          position: absolute;

          left: 4%;
          right: 4%;

          bottom: 25px;

          z-index: 20;

          display: flex;

          align-items: center;

          gap: 16px;

          color: rgba(255, 255, 255, .55);

          font-size: 9px;

          font-weight: 700;

          letter-spacing: 2px;
      }

      .engineering-bottom-line i {

          display: block;

          width: 70px;
          height: 1px;

          background: rgba(255, 255, 255, .3);
      }


      /* =========================================================
   TABLET
========================================================= */

      @media (max-width: 991px) {

          .engineering-hero {
              min-height: 680px;
          }

          .engineering-content {
              padding-top: 90px;
          }

          .engineering-navigation {
              bottom: 75px;
          }

      }


      /* =========================================================
   MOBILE
========================================================= */

      @media (max-width: 600px) {

          .engineering-hero {
              min-height: 700px;
          }

          .engineering-container {
              width: 90%;
          }

          .engineering-content {
              padding: 85px 0 160px;
          }

          .engineering-hero h1 {

              font-size: 43px;

              letter-spacing: -1.5px;
          }

          .engineering-content>p {

              font-size: 14px;

              line-height: 1.65;
          }

          .engineering-buttons {

              flex-direction: column;

              align-items: flex-start;
          }

          .engineering-btn-primary,
          .engineering-btn-secondary {

              min-height: 48px;
          }

          .engineering-navigation {

              left: 5%;
              right: auto;

              bottom: 72px;
          }

          .engineering-bottom-line {

              left: 5%;
              right: 5%;

              bottom: 23px;

              font-size: 8px;
          }

          .engineering-bottom-line i {
              width: 35px;
          }

      }













      .eng-about-banner {
          position: relative;

          min-height: 280px;

          display: flex;
          align-items: center;

          background-image:
              url("https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=2200&q=85");

          background-size: cover;
          background-position: center;
      }

      .eng-about-banner-overlay {
          position: absolute;
          inset: 0;

          background:
              linear-gradient(90deg,
                  rgba(7, 36, 63, .98) 0%,
                  rgba(7, 36, 63, .91) 42%,
                  rgba(7, 36, 63, .55) 75%,
                  rgba(7, 36, 63, .30) 100%);
      }

      .eng-about-banner-content {
          position: relative;
          z-index: 2;

          max-width: 760px;

          padding: 70px 0;
      }

      .eng-about-kicker {
          display: flex;
          align-items: center;

          gap: 12px;

          margin-bottom: 20px;

          color: var(--eng-light-blue);

          font-size: 11px;
          font-weight: 800;

          letter-spacing: 2px;
      }

      .eng-about-kicker::before {
          content: "";

          width: 38px;
          height: 2px;

          background: var(--eng-light-blue);
      }

      .eng-about-banner h1 {
          margin: 0 0 18px;

          color: #fff;

          font-size: clamp(48px, 7vw, 78px);

          line-height: 1;

          letter-spacing: -3px;

          font-weight: 750;
      }

      .eng-about-banner-content>p {
          margin: 0 0 28px;

          max-width: 600px;

          color: rgba(255, 255, 255, .76);

          font-size: 17px;

          line-height: 1.7;
      }

      .eng-about-breadcrumb {
          display: flex;
          align-items: center;

          gap: 12px;

          color: rgba(255, 255, 255, .55);

          font-size: 12px;

          letter-spacing: .5px;
      }

      .eng-about-breadcrumb a {
          color: #fff;

          text-decoration: none;

          transition: .3s ease;
      }

      .eng-about-breadcrumb a:hover {
          color: var(--eng-blue);
      }

      .eng-about-breadcrumb strong {
          color: var(--eng-light-blue);

          font-weight: 600;
      }


      /* =========================================================
   ABOUT US BANNER
========================================================= */

      .eng-about-page {
          --eng-navy: #07243f;
          --eng-blue: #58afe2;
          --eng-light-blue: #65b5e7;
      }


      .eng-about-banner-overlay {
          position: absolute;

          inset: 0;

          z-index: 1;

          background:
              linear-gradient(90deg,
                  rgba(7, 36, 63, .98) 0%,
                  rgba(7, 36, 63, .91) 42%,
                  rgba(7, 36, 63, .55) 75%,
                  rgba(7, 36, 63, .30) 100%);
      }


      /* =========================================================
   CONTAINER
========================================================= */

      .eng-about-container {
          position: relative;

          width: min(1240px, 92%);

          margin: 0 auto;

          z-index: 2;
      }


      /* =========================================================
   CONTENT
========================================================= */

      .eng-about-banner-content {

          max-width: 760px;

          padding: 0px 0;
      }


      /* =========================================================
   KICKER
========================================================= */

      .eng-about-kicker {

          display: flex;

          align-items: center;

          gap: 12px;

          margin-bottom: 20px;

          color: var(--eng-light-blue);

          font-size: 11px;

          font-weight: 800;

          letter-spacing: 2px;
      }

      .eng-about-kicker::before {

          content: "";

          width: 38px;

          height: 2px;

          background: var(--eng-light-blue);
      }


      /* =========================================================
   TITLE
========================================================= */

      .eng-about-banner h1 {

          margin: 0 0 18px;

          color: #fff;

          font-size: clamp(48px,
                  7vw,
                  78px);

          line-height: 1;

          letter-spacing: -3px;

          font-weight: 750;
      }


      /* =========================================================
   DESCRIPTION
========================================================= */

      .eng-about-banner-content>p {

          max-width: 600px;

          margin: 0 0 28px;

          color: rgba(255, 255, 255, .76);

          font-size: 17px;

          line-height: 1.7;
      }


      /* =========================================================
   BREADCRUMB
========================================================= */

      .eng-about-breadcrumb {

          display: flex;

          align-items: center;

          gap: 12px;

          color: rgba(255, 255, 255, .55);

          font-size: 12px;

          letter-spacing: .5px;
      }

      .eng-about-breadcrumb a {

          color: #fff;

          text-decoration: none;

          transition: .3s ease;
      }

      .eng-about-breadcrumb a:hover {

          color: var(--eng-blue);
      }

      .eng-about-breadcrumb strong {

          color: var(--eng-light-blue);

          font-weight: 600;
      }


      /* =========================================================
   MOBILE
========================================================= */

      @media (max-width: 600px) {

          .eng-about-banner {

              min-height: 380px;

              background-position: center;
          }

          .eng-about-container {

              width: 90%;
          }

          .eng-about-banner-content {

              padding: 60px 0;
          }

          .eng-about-kicker {

              font-size: 9px;

              letter-spacing: 1.5px;
          }

          .eng-about-banner h1 {

              font-size: 48px;

              letter-spacing: -2px;
          }

          .eng-about-banner-content>p {

              font-size: 14px;

              line-height: 1.6;
          }

      }



      .contact-page {

          --contact-navy: #07243f;
          --contact-blue: #58afe2;
          --contact-light-blue: #65b5e7;

          --contact-text: #183044;
          --contact-muted: #687b89;

          --contact-border: #dce5ea;
          --contact-soft: #f5f8fa;

          width: 100%;

          background: #fff;

          color: var(--contact-text);

          font-family:
              Arial,
              Helvetica,
              sans-serif;

          overflow: hidden;
      }

      .contact-page *,
      .contact-page *::before,
      .contact-page *::after {

          box-sizing: border-box;
      }

      .contact-container {

          width: min(1240px, 92%);

          margin: 0 auto;
      }


      /* =========================================================
   HERO
========================================================= */

      .contact-hero {

          position: relative;

          min-height: 430px;

          display: flex;

          align-items: center;

          background-image:
              url("https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=2200&q=85");

          background-size: cover;

          background-position: center;
      }

      .contact-hero-overlay {

          position: absolute;

          inset: 0;

          background:
              linear-gradient(90deg,
                  rgba(7, 36, 63, .98) 0%,
                  rgba(7, 36, 63, .92) 38%,
                  rgba(7, 36, 63, .60) 72%,
                  rgba(7, 36, 63, .28) 100%);
      }

      .contact-hero-content {

          position: relative;

          z-index: 2;

          max-width: 760px;

          padding: 75px 0;
      }

      .contact-eyebrow {

          display: flex;

          align-items: center;

          gap: 12px;

          margin-bottom: 20px;

          color: var(--contact-light-blue);

          font-size: 11px;

          font-weight: 800;

          letter-spacing: 2px;
      }

      .contact-eyebrow::before {

          content: "";

          width: 38px;

          height: 2px;

          background: var(--contact-light-blue);
      }

      .contact-hero h1 {

          margin: 0 0 20px;

          color: #fff;

          font-size: clamp(50px, 7vw, 78px);

          line-height: 1;

          letter-spacing: -3px;

          font-weight: 750;
      }

      .contact-hero h1 span {

          color: var(--contact-blue);
      }

      .contact-hero p {

          max-width: 600px;

          margin: 0 0 27px;

          color: rgba(255, 255, 255, .75);

          font-size: 16px;

          line-height: 1.75;
      }

      .contact-breadcrumb {

          display: flex;

          align-items: center;

          gap: 12px;

          color: rgba(255, 255, 255, .50);

          font-size: 12px;
      }

      .contact-breadcrumb a {

          color: #fff;

          text-decoration: none;

          transition: .3s ease;
      }

      .contact-breadcrumb a:hover {

          color: var(--contact-blue);
      }

      .contact-breadcrumb strong {

          color: var(--contact-light-blue);

          font-weight: 600;
      }


      /* =========================================================
   INTRO
========================================================= */

      .contact-intro {

          padding: 0px 0 80px;

          background: #fff;
      }

      .contact-intro-grid {

          display: grid;

          grid-template-columns: 1.15fr .85fr;

          gap: 90px;

          align-items: center;
      }

      .contact-section-label {

          display: flex;

          align-items: center;

          gap: 10px;

          margin-bottom: 17px;

          color: #1684bd;

          font-size: 10px;

          font-weight: 800;

          letter-spacing: 2px;
      }

      .contact-section-label::before {

          content: "";

          width: 28px;

          height: 2px;

          background: #1684bd;
      }

      .contact-intro-content h2 {

          max-width: 650px;

          margin: 0 0 22px;

          color: var(--contact-navy);

          font-size: clamp(35px, 4.5vw, 54px);

          line-height: 1.06;

          letter-spacing: -2.5px;
      }

      .contact-intro-content h2 span {

          color: #1684bd;
      }

      .contact-intro-content p {

          max-width: 650px;

          margin: 0 0 15px;

          color: var(--contact-muted);

          font-size: 15px;

          line-height: 1.85;
      }

      .contact-highlight {

          position: relative;

          padding: 40px;

          background: var(--contact-soft);

          border: 1px solid var(--contact-border);
      }

      .contact-highlight-line {

          width: 45px;

          height: 3px;

          margin-bottom: 25px;

          background: var(--contact-blue);
      }

      .contact-highlight h3 {

          margin: 0 0 15px;

          color: var(--contact-navy);

          font-size: 25px;

          line-height: 1.3;
      }

      .contact-highlight p {

          margin: 0;

          color: var(--contact-muted);

          font-size: 13px;

          line-height: 1.8;
      }


      /* =========================================================
   MAIN CONTACT
========================================================= */

      .contact-main {

          padding: 95px 0;

          background: #f6f9fb;
      }

      .contact-main-grid {

          display: grid;

          grid-template-columns: .8fr 1.2fr;

          gap: 75px;

          align-items: start;
      }


      /* =========================================================
   DETAILS
========================================================= */

      .contact-details h2 {

          margin: 0 0 35px;

          color: var(--contact-navy);

          font-size: 42px;

          line-height: 1.1;

          letter-spacing: -2px;
      }

      .contact-details h2 span {

          color: #1684bd;
      }

      .contact-detail-item {

          display: flex;

          gap: 17px;

          padding: 20px 0;

          border-top: 1px solid var(--contact-border);
      }

      .contact-detail-item:last-of-type {

          border-bottom: 1px solid var(--contact-border);
      }

      .contact-detail-icon {

          width: 43px;

          height: 43px;

          flex: 0 0 43px;

          display: flex;

          align-items: center;

          justify-content: center;

          background: #eaf5fb;

          color: #1684bd;
      }

      .contact-detail-icon svg {

          width: 21px;

          height: 21px;
      }

      .contact-detail-item span {

          display: block;

          margin-bottom: 6px;

          color: #8a99a3;

          font-size: 9px;

          font-weight: 800;

          letter-spacing: 1.5px;
      }

      .contact-detail-item strong {

          display: block;

          color: var(--contact-navy);

          font-size: 14px;

          line-height: 1.6;
      }

      .contact-detail-item p {

          margin: 4px 0 0;

          color: var(--contact-muted);

          font-size: 13px;

          line-height: 1.7;
      }

      .contact-detail-item a {

          color: #1684bd;

          text-decoration: none;

          font-size: 14px;

          font-weight: 600;

          transition: .3s ease;
      }

      .contact-detail-item a:hover {

          color: var(--contact-navy);
      }


      /* RESPONSE */

      .contact-response {

          display: flex;

          gap: 14px;

          margin-top: 25px;

          padding: 18px;

          background: #eaf5fb;

          border-left: 3px solid var(--contact-blue);
      }

      .response-check {

          width: 28px;

          height: 28px;

          flex: 0 0 28px;

          display: flex;

          align-items: center;

          justify-content: center;

          border-radius: 50%;

          background: #1684bd;

          color: #fff;

          font-size: 13px;
      }

      .contact-response strong {

          display: block;

          margin-bottom: 4px;

          color: var(--contact-navy);

          font-size: 12px;
      }

      .contact-response p {

          margin: 0;

          color: var(--contact-muted);

          font-size: 11px;

          line-height: 1.6;
      }


      /* =========================================================
   FORM BOX
========================================================= */

      .contact-form-box {
          border-radius: 10px;
          padding: 42px;

          background: #fff;

          border: 1px solid var(--contact-border);

          box-shadow:
              0 18px 55px rgba(7, 36, 63, .08);
      }

      .contact-form-header {

          margin-bottom: 30px;
      }

      .contact-form-header h2 {

          margin: 0 0 10px;

          color: var(--contact-navy);

          font-size: 30px;

          line-height: 1.15;
      }

      .contact-form-header h2 span {

          color: #1684bd;
      }

      .contact-form-header p {

          margin: 0;

          color: var(--contact-muted);

          font-size: 13px;

          line-height: 1.7;
      }

      .contact-form-grid {

          display: grid;

          grid-template-columns: 1fr 1fr;

          gap: 20px;
      }

      .contact-field {

          display: flex;

          flex-direction: column;

          gap: 8px;
      }

      .contact-field-full {

          grid-column: 1 / -1;
      }

      .contact-field label {

          color: var(--contact-navy);

          font-size: 11px;

          font-weight: 700;
      }

      .contact-field label em {

          color: #1684bd;

          font-style: normal;
      }

      .contact-field input,
      .contact-field select,
      .contact-field textarea {

          width: 100%;

          border: 1px solid #d5e0e6;

          border-radius: 0;

          outline: none;

          background: #fbfcfd;

          color: var(--contact-navy);

          font-family: inherit;

          font-size: 13px;

          transition:
              border-color .25s ease,
              box-shadow .25s ease,
              background .25s ease;
      }

      .contact-field input,
      .contact-field select {

          height: 50px;

          padding: 0 15px;
      }

      .contact-field textarea {

          min-height: 145px;

          padding: 14px 15px;

          resize: vertical;

          line-height: 1.6;
      }

      .contact-field input::placeholder,
      .contact-field textarea::placeholder {

          color: #9ba8b0;
      }

      .contact-field input:focus,
      .contact-field select:focus,
      .contact-field textarea:focus {

          background: #fff;

          border-color: var(--contact-blue);

          box-shadow:
              0 0 0 3px rgba(88, 175, 226, .10);
      }


      /* =========================================================
   SUBMIT
========================================================= */

      .contact-submit {

          min-height: 54px;

          margin-top: 25px;

          display: inline-flex;

          align-items: center;

          justify-content: center;

          gap: 14px;

          padding: 0 26px;

          border: 0;

          border-radius: 0;

          background: var(--contact-navy);

          color: #fff;

          cursor: pointer;

          font-family: inherit;

          font-size: 10px;

          font-weight: 800;

          letter-spacing: 1.3px;

          transition: .3s ease;
      }

      .contact-submit svg {

          transition: transform .3s ease;
      }

      .contact-submit:hover {

          background: #1684bd;
      }

      .contact-submit:hover svg {

          transform: translateX(5px);
      }

      .contact-form-note {

          margin: 13px 0 0;

          color: #99a5ac;

          font-size: 10px;

          line-height: 1.5;
      }


      /* =========================================================
   LOCATION
========================================================= */

      .contact-location {

          padding: 100px 0;
      }

      .contact-location-grid {

          display: grid;

       

          min-height: 440px;

          background: var(--contact-soft);
      }

      .contact-map {

          min-height: 440px;
      }

      .contact-map iframe {

          display: block;

          width: 100%;

          height: 100%;

          min-height: 440px;

          border: 0;

          filter: grayscale(20%);
      }

      .contact-location-content {

          display: flex;

          flex-direction: column;

          justify-content: center;

          padding: 55px;
      }

      .contact-location-content h2 {

          margin: 0 0 18px;

          color: var(--contact-navy);

          font-size: 38px;

          line-height: 1.1;

          letter-spacing: -1.5px;
      }

      .contact-location-content h2 span {

          display: block;

          color: #1684bd;
      }

      .contact-location-content>p {

          margin: 0 0 25px;

          color: var(--contact-muted);

          font-size: 13px;

          line-height: 1.8;
      }

      .location-address {

          margin-bottom: 25px;

          padding-left: 15px;

          border-left: 2px solid var(--contact-blue);
      }

      .location-address strong {

          color: var(--contact-navy);

          font-size: 13px;
      }

      .location-address p {

          margin: 6px 0 0;

          color: var(--contact-muted);

          font-size: 12px;

          line-height: 1.7;
      }

      .location-button {

          width: fit-content;

          min-height: 48px;

          display: inline-flex;

          align-items: center;

          gap: 14px;

          padding: 0 21px;

          background: var(--contact-navy);

          color: #fff;

          text-decoration: none;

          font-size: 10px;

          font-weight: 800;

          letter-spacing: 1px;

          transition: .3s ease;
      }

      .location-button:hover {

          background: #1684bd;

          color: #fff;
      }

      .location-button span {

          font-size: 16px;
      }


      /* =========================================================
   FINAL CTA
========================================================= */

      .contact-final-cta {

          padding: 65px 0;

          background: var(--contact-navy);
      }

      .contact-cta-inner {

          display: flex;

          align-items: center;

          justify-content: space-between;

          gap: 40px;
      }

      .contact-cta-label {

          margin-bottom: 10px;

          color: var(--contact-blue);

          font-size: 10px;

          font-weight: 800;

          letter-spacing: 1.7px;
      }

      .contact-cta-inner h2 {

          max-width: 750px;

          margin: 0;

          color: #fff;

          font-size: 34px;

          line-height: 1.2;

          letter-spacing: -.7px;
      }

      .contact-cta-inner h2 span {

          color: var(--contact-blue);
      }

      .contact-cta-button {

          flex: 0 0 auto;

          min-height: 52px;

          display: inline-flex;

          align-items: center;

          justify-content: center;

          gap: 14px;

          padding: 0 24px;

          background: #fff;

          color: var(--contact-navy);

          text-decoration: none;

          font-size: 10px;

          font-weight: 800;

          letter-spacing: 1px;

          transition: .3s ease;
      }

      .contact-cta-button:hover {

          background: var(--contact-blue);

          color: #fff;
      }

      .contact-cta-button span {

          font-size: 18px;

          transition: .3s ease;
      }

      .contact-cta-button:hover span {

          transform: translateX(5px);
      }


      /* =========================================================
   TABLET
========================================================= */

      @media (max-width: 991px) {

          .contact-intro-grid {

              grid-template-columns: 1fr;

              gap: 45px;
          }

          .contact-main-grid {

              grid-template-columns: 1fr;

              gap: 55px;
          }

          .contact-location-grid {

              grid-template-columns: 1fr;
          }

          .contact-map,
          .contact-map iframe {

              min-height: 350px;
          }

      }


      /* =========================================================
   MOBILE
========================================================= */

      @media (max-width: 600px) {

          .contact-container {

              width: 90%;
          }

          .contact-hero {

              min-height: 390px;
          }

          .contact-hero-content {

              padding: 60px 0;
          }

          .contact-hero h1 {

              font-size: 48px;

              letter-spacing: -2px;
          }

          .contact-hero p {

              font-size: 14px;
          }

          .contact-intro {

              padding: 70px 0 60px;
          }

          .contact-intro-content h2 {

              font-size: 38px;

              letter-spacing: -1.5px;
          }

          .contact-highlight {

              padding: 28px;
          }

          .contact-main {

              padding: 70px 0;
          }

          .contact-details h2 {

              font-size: 37px;
          }

          .contact-form-box {

              padding: 25px 20px;
          }

          .contact-form-grid {

              grid-template-columns: 1fr;

              gap: 18px;
          }

          .contact-field-full {

              grid-column: auto;
          }

          .contact-submit {

              width: 100%;
          }

          .contact-location {

              padding: 70px 0;
          }

          .contact-location-content {

              padding: 35px 25px;
          }

          .contact-location-content h2 {

              font-size: 31px;
          }

          .contact-cta-inner {

              flex-direction: column;

              align-items: flex-start;

              gap: 25px;
          }

          .contact-cta-inner h2 {

              font-size: 29px;
          }

          .contact-cta-button {

              width: 100%;
          }

      }


      /* =========================================================
   ABOUT US BANNER
========================================================= */

      .eng-about-page {
          --eng-navy: #07243f;
          --eng-blue: #58afe2;
          --eng-light-blue: #65b5e7;
      }


      /* =========================================================
   BANNER
========================================================= */

      .eng-about-banner {
          position: relative;

          min-height: 250px;

          display: flex;
          align-items: center;

          overflow: hidden;

          background-image: url("assests/images/banner/1.png"
              );

          background-size: cover;
          background-position: center;
      }


      /* =========================================================
   OVERLAY
========================================================= */

      .eng-about-banner-overlay {
          position: absolute;

          inset: 0;

          z-index: 1;

          background:
              linear-gradient(90deg,
                  rgba(7, 36, 63, .98) 0%,
                  rgba(7, 36, 63, .91) 42%,
                  rgba(7, 36, 63, .55) 75%,
                  rgba(7, 36, 63, .30) 100%);
      }


      /* =========================================================
   CONTAINER
========================================================= */

      .eng-about-container {
          position: relative;

          width: min(1240px, 92%);

          margin: 0 auto;

          z-index: 2;
      }


      /* =========================================================
   CONTENT
========================================================= */

      .eng-about-banner-content {

          max-width: 760px;

          padding: 0px 0;
      }


      /* =========================================================
   KICKER
========================================================= */

      .eng-about-kicker {

          display: flex;

          align-items: center;

          gap: 12px;

          margin-bottom: 20px;

          color: var(--eng-light-blue);

          font-size: 11px;

          font-weight: 800;

          letter-spacing: 2px;
      }

      .eng-about-kicker::before {

          content: "";

          width: 38px;

          height: 2px;

          background: var(--eng-light-blue);
      }


      /* =========================================================
   TITLE
========================================================= */

      .eng-about-banner h1 {

          margin: 0 0 18px;

          color: #fff;

          font-size: clamp(48px,
                  7vw,
                  78px);

          line-height: 1;

          letter-spacing: -3px;

          font-weight: 750;
      }


      /* =========================================================
   DESCRIPTION
========================================================= */

      .eng-about-banner-content>p {

          max-width: 600px;

          margin: 0 0 28px;

          color: rgba(255, 255, 255, .76);

          font-size: 17px;

          line-height: 1.7;
      }


      /* =========================================================
   BREADCRUMB
========================================================= */

      .eng-about-breadcrumb {

          display: flex;

          align-items: center;

          gap: 12px;

          color: rgba(255, 255, 255, .55);

          font-size: 12px;

          letter-spacing: .5px;
      }

      .eng-about-breadcrumb a {

          color: #fff;

          text-decoration: none;

          transition: .3s ease;
      }

      .eng-about-breadcrumb a:hover {

          color: var(--eng-blue);
      }

      .eng-about-breadcrumb strong {

          color: var(--eng-light-blue);

          font-weight: 600;
      }


      /* =========================================================
   MOBILE
========================================================= */

      @media (max-width: 600px) {

          .eng-about-banner {

              min-height: 380px;

              background-position: center;
          }

          .eng-about-container {

              width: 90%;
          }

          .eng-about-banner-content {

              padding: 60px 0;
          }

          .eng-about-kicker {

              font-size: 9px;

              letter-spacing: 1.5px;
          }

          .eng-about-banner h1 {

              font-size: 48px;

              letter-spacing: -2px;
          }

          .eng-about-banner-content>p {

              font-size: 14px;

              line-height: 1.6;
          }

      }


      /* =========================================================
   PRODUCTS MAIN
========================================================= */

      .et-products {
          background: #ffffff;
          padding: 100px 0;
          color: #17212b;
      }

      .et-container {
          width: min(1180px, 92%);
          margin: auto;
      }


      /* =========================================================
   INTRO
========================================================= */

      .et-intro {
          display: grid;
          grid-template-columns: 1.2fr .8fr;
          gap: 80px;
          align-items: end;
          margin-bottom: 65px;
      }

      .et-small-title {
          display: block;
          color: #c2002f;
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 2px;
          margin-bottom: 15px;
      }

      .et-intro h2 {
          font-size: 48px;
          line-height: 1.1;
          font-weight: 700;
          margin: 0;
          color: #17212b;
      }

      .et-intro h2 span {
          display: block;
          color: #7b858d;
      }

      .et-intro-right {
          border-left: 3px solid #c2002f;
          padding-left: 25px;
      }

      .et-intro-right p {
          margin: 0;
          color: #66717a;
          font-size: 16px;
          line-height: 1.8;
      }


      /* =========================================================
   FEATURED PRODUCT
========================================================= */

      .et-featured {
          display: grid;
          grid-template-columns: 1fr 1fr;
          min-height: 560px;
          background: #f4f6f7;
          margin-bottom: 40px;
      }

      .et-featured2 {
          display: grid;
          grid-template-columns: 1fr 1fr;
          min-height: 560px;
          background: #fbe7f770;
          margin-bottom: 40px;
      }



      /* IMAGE */

      .et-featured-image {
          position: relative;
          min-height: 560px;
        
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
      }

      .et-featured-image img {
          width: 90%;
          height: 90%;
          object-fit: contain;
          transition: transform .5s ease;
      }

      .et-featured:hover .et-featured-image img {
          transform: scale(1.04);
      }

      .et-product-number {
          position: absolute;
          top: 25px;
          left: 30px;
          font-size: 52px;
          line-height: 1;
          font-weight: 700;
          color: rgba(0, 0, 0, .08);
      }

      .et-featured-label {
          position: absolute;
          top: 30px;
          right: 30px;
          background: #c2002f;
          color: #fff;
          padding: 9px 15px;
          font-size: 10px;
          letter-spacing: 1.5px;
          font-weight: 700;
      }


      /* CONTENT */

      .et-featured-content {
          padding: 65px 55px;
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      .et-model {
          color: #c2002f;
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 2px;
          margin-bottom: 15px;
      }

      .et-featured-content h1 {
          font-size: 34px;
          line-height: 1.2;
          margin: 0 0 20px;
          color: #17212b;
      }

      .et-description {
          color: #69747d;
          font-size: 15px;
          line-height: 1.75;
          margin-bottom: 25px;
      }


      /* SPECS */

      .et-specs {
          display: flex;
          border-top: 1px solid #d8dde0;
          border-bottom: 1px solid #d8dde0;
          margin-bottom: 25px;
      }

      .et-spec {
          flex: 1;
          padding: 17px 10px;
          border-right: 1px solid #d8dde0;
      }

      .et-spec:last-child {
          border-right: 0;
      }

      .et-spec strong {
          display: block;
          font-size: 23px;
          color: #17212b;
      }

      .et-spec span {
          font-size: 10px;
          color: #7a858d;
          text-transform: uppercase;
          letter-spacing: 1px;
      }


      /* FEATURES */

      .et-features {
          padding: 0;
          margin: 0 0 28px;
          list-style: none;
      }

      .et-features li {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 10px;
          font-size: 13px;
          color: #4f5b64;
      }

      .et-features li span {
          color: #c2002f;
          font-size: 10px;
          font-weight: 700;
      }


      /* BUTTON */

      .et-main-btn {
          width: fit-content;
          display: flex;
          align-items: center;
          gap: 8px;
          background: #17212b;
          color: #fff;
          padding: 10px 10px 10px 10px;
          text-decoration: none;
          font-size: 13px;
          font-weight: 600;
          transition: .3s ease;
      }

      .et-main-btn i {
          font-style: normal;
          font-size: 20px;
          transition: transform .3s ease;
      }

      .et-main-btn:hover {
          background: #c2002f;
          color: #fff;
      }

      .et-main-btn:hover i {
          transform: translateX(5px);
      }


      /* =========================================================
   SECTION HEADING
========================================================= */

      .et-section-heading {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 50px;
          align-items: end;
          margin-bottom: 45px;
      }

      .et-section-heading>div>span {
          color: #c2002f;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 2px;
      }

      .et-section-heading h2 {
          font-size: 36px;
          margin: 10px 0 0;
          line-height: 1.15;
      }

      .et-section-heading h2 strong {
          color: #7b858d;
      }

      .et-section-heading>p {
          color: #69747d;
          line-height: 1.7;
          max-width: 450px;
          margin-left: auto;
      }


      /* =========================================================
   PRODUCT LIST
========================================================= */

      .et-products-list {
          border-top: 1px solid #dfe3e5;
      }

      .et-product {
          display: grid;
          grid-template-columns: 38% 62%;
          min-height: 300px;
          border-bottom: 1px solid #dfe3e5;
          transition: .35s ease;
      }

      .et-product:hover {
          background: #f7f8f9;
      }


      /* PRODUCT IMAGE */

      .et-product-image {
          position: relative;
          background: #eef1f3;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
      }

      .et-product-index {
          position: absolute;
          left: 20px;
          top: 20px;
          color: rgba(0, 0, 0, .15);
          font-size: 35px;
          font-weight: 700;
      }

      .et-placeholder {
          width: 75%;
          height: 75%;
          border: 1px dashed #c8ced2;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
      }

      .et-placeholder span {
          color: #a0a8ae;
          font-size: 30px;
          font-weight: 700;
          letter-spacing: 2px;
      }


      /* PRODUCT CONTENT */

      .et-product-content {
          padding: 42px 50px;
          display: flex;
          flex-direction: column;
      }

      .et-product-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .et-product-model {
          font-size: 11px;
          color: #c2002f;
          font-weight: 700;
          letter-spacing: 1.5px;
      }

      .et-arrow {
          width: 38px;
          height: 38px;
          border: 1px solid #d8dde0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          transition: .3s ease;
      }

      .et-product:hover .et-arrow {
          background: #c2002f;
          border-color: #c2002f;
          color: #fff;
      }

      .et-product h3 {
          max-width: 600px;
          font-size: 26px;
          line-height: 1.25;
          margin: 22px 0 12px;
          color: #17212b;
      }

      .et-product p {
          max-width: 650px;
          color: #69747d;
          line-height: 1.7;
          font-size: 14px;
          margin: 0;
      }

      .et-product-bottom {
          margin-top: auto;
          padding-top: 25px;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }

      .et-product-bottom span {
          color: #929aa0;
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 1px;
      }

      .et-product-bottom a {
          color: #17212b;
          font-size: 13px;
          font-weight: 700;
          text-decoration: none;
      }

      .et-product-bottom a:hover {
          color: #c2002f;
      }


      /* =========================================================
   CTA
========================================================= */

      .et-product-cta {
          margin-top: 90px;
          padding: 50px 55px;
          background: #17212b;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 40px;
      }

      .et-product-cta span {
          color: #d5dadd;
          font-size: 10px;
          letter-spacing: 2px;
          font-weight: 700;
      }

      .et-product-cta h2 {
          font-size: 30px;
          line-height: 1.25;
          margin: 10px 0 0;
      }

      .et-product-cta a {
          flex-shrink: 0;
          background: #c2002f;
          color: #fff;
          padding: 15px 22px;
          text-decoration: none;
          font-size: 13px;
          font-weight: 600;
      }

      .et-product-cta a strong {
          margin-left: 25px;
          font-size: 18px;
      }

      .et-product-cta a:hover {
          background: #fff;
          color: #17212b;
      }


      /* =========================================================
   RESPONSIVE
========================================================= */

      @media (max-width: 900px) {

          .et-products {
              padding: 70px 0;
          }

          .et-intro {
              grid-template-columns: 1fr;
              gap: 25px;
          }

          .et-intro h2 {
              font-size: 38px;
          }

          .et-featured {
              grid-template-columns: 1fr;
          }

          .et-featured-image {
              min-height: 400px;
          }

          .et-featured-content {
              padding: 45px 35px;
          }

          .et-section-heading {
              grid-template-columns: 1fr;
              gap: 20px;
          }

          .et-section-heading>p {
              margin-left: 0;
          }

          .et-product {
              grid-template-columns: 1fr;
          }

          .et-product-image {
              min-height: 280px;
          }

          .et-product-content {
              min-height: 300px;
              padding: 35px;
          }

          .et-product-cta {
              flex-direction: column;
              align-items: flex-start;
              padding: 40px 30px;
          }

      }


      @media (max-width: 576px) {

          .et-intro h2 {
              font-size: 32px;
          }

          .et-featured-content h1 {
              font-size: 27px;
          }

          .et-featured-content {
              padding: 35px 22px;
          }

          .et-featured-image {
              min-height: 300px;
          }

          .et-spec strong {
              font-size: 19px;
          }

          .et-spec span {
              font-size: 8px;
          }

          .et-product-content {
              padding: 30px 22px;
          }

          .et-product h3 {
              font-size: 22px;
          }

          .et-product-bottom {
              flex-direction: column;
              align-items: flex-start;
              gap: 15px;
          }

          .et-product-cta h2 {
              font-size: 25px;
          }

      }


/* =========================================================
   SPECIFICATION LIST
========================================================= */

.et-specifications {
        margin-bottom: 8px;
    margin-top: 8px;
}

.et-spec-title {
    margin-bottom: 14px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #202326;
}

.et-spec-list {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #d9dcde;
}

.et-spec-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 10px 14px 0;

    border-bottom: 1px solid #d9dcde;
}

.et-spec-item:nth-child(odd) {
    border-right: 1px solid #d9dcde;
    padding-right: 18px;
}

.et-spec-item:nth-child(even) {
    padding-left: 18px;
}

.et-spec-icon {
    flex-shrink: 0;

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #c2002f;
    color: #fff;

    font-size: 8px;
    font-weight: 700;
}

.et-spec-item strong {
    display: block;

    margin-bottom: 3px;

    color: #202326;

    font-size: 12px;
    font-weight: 700;
}

.et-spec-item p {
    margin: 0;

    color: #777;

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 575px) {

    .et-spec-list {
        grid-template-columns: 1fr;
    }

    .et-spec-item:nth-child(odd) {
        border-right: 0;
        padding-right: 0;
    }

    .et-spec-item:nth-child(even) {
        padding-left: 0;
    }

}















      .footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 5px;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: #ffffff;
    color: #07243f;
    border-color: #ffffff;
    transform: translateY(-3px);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    text-decoration: none;
}

.contact-item i {
    width: 18px;
    min-width: 18px;
    margin-top: 4px;
    font-size: 14px;
    color: #1ed93f;
}

.contact-item span {
   font-size: 12px !important;
    line-height: 1.6;
}

.contact-item:hover {
    color: #1ed93f;
}

.address-item {
    color: inherit;
}

.address-item i {
    margin-top: 5px;
}

/* =========================================================
   SOLUTIONS - PREMIUM INDUSTRIAL DESIGN
========================================================= */

#solutions.bg-soft {
    position: relative;
    padding: 100px 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(14, 111, 194, 0.07), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(217, 105, 30, 0.05), transparent 25%),
        #f4f7fa;
    overflow: hidden;
}


/* subtle technical background */

#solutions.bg-soft::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(14,111,194,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,111,194,.025) 1px, transparent 1px);

    background-size: 45px 45px;

    pointer-events: none;
}


/* =========================================================
   SECTION HEADING
========================================================= */

#solutions .section-head {
    position: relative;
    z-index: 2;

  
    margin: 0 auto 55px;

}

#solutions .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: #0e6fc2;
}

#solutions .eyebrow::before,
#solutions .eyebrow::after {
    content: "";

    width: 25px;
    height: 1px;

    background: #d9691e;
}

#solutions .section-head h2 {
    margin: 0 0 17px;

    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.12;
    font-weight: 700;

    color: #142638;
}

#solutions .section-head p {
    

    margin: auto;

    font-size: 15px;
    line-height: 1.8;

    color: #687988;
}


/* =========================================================
   GRID
========================================================= */

#solutions .solutions-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


/* =========================================================
   CARD
========================================================= */

#solutions .sol-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 390px;

    padding: 32px;

    background: #ffffff;

    border: 1px solid #dfe7ed;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* top blue line */

#solutions .sol-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #0e6fc2;

    transition: width .4s ease;
}


/* orange corner */

#solutions .sol-card::after {
    content: "";

    position: absolute;

    right: -35px;
    bottom: -35px;

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background: rgba(217,105,30,.055);

    transition: transform .4s ease;
}


#solutions .sol-card:hover {
    transform: translateY(-8px);

    border-color: #cbdce9;

    box-shadow:
        0 20px 50px rgba(21, 48, 70, .12);
}


#solutions .sol-card:hover::before {
    width: 100%;
}

#solutions .sol-card:hover::after {
    transform: scale(1.8);
}


/* =========================================================
   ICON
========================================================= */

#solutions .sol-icon {
    position: relative;
    z-index: 2;

    width: 62px;
    height: 62px;

    padding: 12px;

    margin-bottom: 25px;

    background: #f1f7fc;

    border: 1px solid #d9e8f3;

    transition:
        background .35s ease,
        transform .35s ease;
}


#solutions .sol-card:hover .sol-icon {
    background: #e8f3fb;

    transform: translateY(-3px);
}


/* =========================================================
   TITLE
========================================================= */

#solutions .sol-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 13px;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;

    color: #172b3d;
}


/* =========================================================
   DESCRIPTION
========================================================= */

#solutions .sol-card p {
    position: relative;
    z-index: 2;

    margin: 0 0 22px;

    font-size: 13.5px;
    line-height: 1.75;

    color: #6b7b89;
}


/* =========================================================
   TAGS
========================================================= */

#solutions .sol-tags {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: auto;
    margin-bottom: 24px;
}


#solutions .sol-tags span {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 5px 9px;

    font-size: 9px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: .7px;
    text-transform: uppercase;

    color: #557085;

    background: #f5f8fa;

    border: 1px solid #e2e9ee;

    transition: all .3s ease;
}


#solutions .sol-card:hover .sol-tags span {
    color: #0e6fc2;

    background: #f0f7fc;

    border-color: #d5e6f3;
}


/* =========================================================
   VIEW DETAILS
========================================================= */

#solutions .link-arrow {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding-top: 17px;

    border-top: 1px solid #e7edf1;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;

    color: #0e6fc2;

    transition: color .3s ease;
}


#solutions .link-arrow svg {
    width: 18px;
    height: 18px;

    padding: 3px;

    background: #edf5fb;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


#solutions .link-arrow:hover {
    color: #d9691e;
}


#solutions .link-arrow:hover svg {
    color: #ffffff;

    background: #d9691e;

    transform: translateX(5px);
}


/* =========================================================
   DIFFERENT CARD ACCENT
========================================================= */

/* Every third card gets orange accent on hover */

#solutions .sol-card:nth-child(3n):hover::before {
    background: #d9691e;
}

#solutions .sol-card:nth-child(3n) .sol-icon {
    background: #fff8f3;
    border-color: #f2dfd1;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    #solutions.bg-soft {
        padding: 80px 0;
    }

    #solutions .section-head {
        margin-bottom: 40px;
    }

    #solutions .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    #solutions .sol-card {
        min-height: 370px;
        padding: 27px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #solutions.bg-soft {
        padding: 65px 0;
    }

    #solutions .section-head {
        margin-bottom: 35px;
        padding: 0 10px;
    }

    #solutions .section-head h2 {
        font-size: 30px;
    }

    #solutions .section-head p {
        font-size: 14px;
        line-height: 1.7;
    }

    #solutions .solutions-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    #solutions .sol-card {
        min-height: auto;
        padding: 25px;
    }

    #solutions .sol-icon {
        width: 56px;
        height: 56px;
        padding: 11px;
        margin-bottom: 21px;
    }

    #solutions .sol-card h3 {
        font-size: 19px;
    }

    #solutions .sol-card p {
        font-size: 13px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    #solutions.bg-soft {
        padding: 55px 0;
    }

    #solutions .section-head h2 {
        font-size: 27px;
    }

    #solutions .eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
    }

    #solutions .sol-card {
        padding: 22px;
    }

    #solutions .sol-card h3 {
        font-size: 18px;
    }

    #solutions .sol-card p {
        font-size: 12.5px;
        line-height: 1.7;
    }

    #solutions .sol-tags span {
        font-size: 8px;
        padding: 5px 7px;
    }

}
/* =========================================================
   VISION MISSION - DIFFERENT STYLE
========================================================= */

.vm-section {
    padding: 110px 0;
    background: #ffffff;
    overflow: hidden;
}


/* Header */

.vm-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 60px;
}

.vm-kicker {
    display: block;
    margin-bottom: 14px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;

    color: #d9691e;
}

.vm-header h2 {
    max-width: 700px;
    margin: 0;

    font-size: clamp(35px, 4.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -1.5px;

    color: #172b3c;
}

.vm-header h2 em {
    font-style: normal;
    color: #0e6fc2;
}

.vm-header p {
    max-width: 380px;
    margin: 0;

    font-size: 13px;
    line-height: 1.8;

    color: #71818d;
}


/* Layout */

.vm-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


/* Blocks */

.vm-block {
  position: relative;
    min-height: 342px;
    padding: 32px;
    overflow: hidden;
    transition: .4s ease;
}

.vm-vision {
    background: #102131;
    color: #ffffff;
}

.vm-mission {
    background: #edf5fa;
    color: #172b3c;
}


/* Hover */

.vm-vision:hover,
.vm-mission:hover {
    transform: translateY(-5px);
}


/* Watermark */

.vm-watermark {
    position: absolute;

    right: -25px;
    bottom: -70px;

    font-size: 300px;
    line-height: 1;

    font-weight: 900;

    pointer-events: none;

    color: rgba(255,255,255,.035);
}

.vm-mission .vm-watermark {
    color: rgba(14,111,194,.045);
}


/* Meta */

.vm-meta {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 15px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.vm-vision .vm-meta {
    color: #8396a5;
}

.vm-mission .vm-meta {
    color: #6d8190;
}

.vm-meta span:first-child {
    color: #d9691e;
}


/* Content */

.vm-content {
    position: relative;
    z-index: 2;

    max-width: 500px;

    margin-top: 35px;
}

.vm-content h3 {
    color: #9f9e9e;
    margin: 0 0 25px;
    font-size: clamp(27px, 3vw, 39px);
    line-height: 1.15;
    letter-spacing: -.8px;
}
.vm-content h3 strong {
    color: #4aa0dc;
}

.vm-mission .vm-content h3 strong {
    color: #0e6fc2;
}

.vm-content p {
    max-width: 460px;

    margin: 0;

    font-size: 13px;
    line-height: 1.9;
}

.vm-vision .vm-content p {
    color: #8fa1af;
}

.vm-mission .vm-content p {
    color: #647887;
}


/* Arrow */

.vm-arrow {
    position: absolute;

    right: 45px;
    bottom: 40px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid currentColor;

    font-size: 20px;

    transition: .3s ease;
}

.vm-vision .vm-arrow {
    color: #ffffff;
}

.vm-mission .vm-arrow {
    color: #0e6fc2;
}

.vm-block:hover .vm-arrow {
    background: #d9691e;
    border-color: #d9691e;
    color: #ffffff;
}


/* Mobile */

@media(max-width:767px) {

    .vm-section {
        padding: 70px 0;
    }

    .vm-header {
        display: block;
        margin-bottom: 35px;
    }

    .vm-header h2 {
        font-size: 34px;
    }

    .vm-header p {
        margin-top: 20px;
    }

    .vm-layout {
        grid-template-columns: 1fr;
    }

    .vm-block {
        min-height: 420px;
        padding: 30px;
    }

    .vm-content {
        margin-top: 75px;
    }

    .vm-content h3 {
        font-size: 27px;
    }

    .vm-watermark {
        font-size: 220px;
    }

    .vm-arrow {
        right: 30px;
        bottom: 30px;
    }

}